<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>材料库存列表</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/element.min.css?1" />
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_td6xi6o191m.css" />
		<link rel="stylesheet" href="../css/reset.css?3123" />
		<link rel="stylesheet" href="../css/setlayui.css?12" />
		<link rel="stylesheet" href="../css/viewer.min.css" />
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/element.min.js"></script>
		<script src="../js/viewer.min.js"></script>
	</head>
	<body>
		<div id="app" class="page-container" style="display: none" v-show="showApp">
			<div class="top_but_box1" ref="butbox">
				<!-- <div class="top_but_box">
                    <el-button type="primary" @click="addpdd">
                        <div class="but_cont">
                            <div class="iconfont iconzengjia"></div>
                            <div class="but_txt">添加盘点单</div>
                        </div>
                    </el-button>
                    <el-button type="primary" @click="addlyd">
                        <div class="but_cont">
                            <div class="iconfont iconzengjia"></div>
                            <div class="but_txt">添加领用单</div>
                        </div>
                    </el-button>
                    <el-button type="primary" @click="addjhpd">
                        <div class="but_cont">
                            <div class="iconfont iconzengjia"></div>
                            <div class="but_txt">添加计划盘点</div>
                        </div>
                    </el-button>
                    <el-button type="primary" @click="checkpdjl">
                        <div class="but_cont">
                            <div class="iconfont iconchakan"></div>
                            <div class="but_txt">查看盘点记录</div>
                        </div>
                    </el-button>
                    <el-button type="primary" @click="checkrcjl">
                        <div class="but_cont">
                            <div class="iconfont iconshenpi"></div>
                            <div class="but_txt">查看入场记录</div>
                        </div>
                    </el-button>
                </div> -->
                <el-button type="primary" @click="openChildren" style="height: 32px;padding: 0 20px;">
                    <div class="but_cont">
                        <div class="but_txt">{{isopen ? '全部收起' : '全部展开'}}</div>
                    </div>
                </el-button>
			</div>
			<div class="table_box" ref="tablebox">
				<el-table ref="multipleTable" :select-on-indeterminate="false"
                @select="select"
                @select-all="selectall" 
                @row-click="rowclick" 
                @selection-change="selectionchange" height="100%"  header-row-class-name="table_th"  :data="tableData" :cell-style="{background:'#fff'}" :row-class-name="tableRowClassName" border style="width: 100%">
					<el-table-column type="expand" align="center" >
                        <el-table-column type="expand" align="center" >
                            <template slot="header" slot-scope="props">
                                <div class="tab_seach_box">
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <div class="child_table">
                                    <el-table ref="multipleTable3" header-row-class-name="table_th2"  :data="scope.row.materialStorageLocaitonDatas" :cell-style="{background:'#fff'}" border style="width: 100%">
                                        <el-table-column label="" prop="" align="center" show-overflow-tooltip></el-table-column>
                                        <el-table-column label="存放位置" prop="storageName" align="center" show-overflow-tooltip></el-table-column>
                                        <el-table-column label="当前库存总量" prop="currrentCount" align="center" show-overflow-tooltip>
                                            <template slot-scope="childrow">
                                                <div><span @click="checkAllcount(childrow.row)" style="text-decoration: underline;cursor: pointer;">{{childrow.row.currrentCount}}</span></div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="" prop="" align="center" show-overflow-tooltip></el-table-column>
                                    </el-table>
                                </div>
                            </template>
                        </el-table-column>
					</el-table-column>
                    
                    <el-table-column label="全选" align="center" width="60">
                        <el-table-column type="selection" align="center" width="60">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="序号" align="center" width="60">
                        <el-table-column prop="typeid" label="检索" align="center" width="60">
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="材料名称" prop="materialName" align="center" min-width="164" show-overflow-tooltip>
                        <el-table-column label="材料名称" prop="materialName" align="center" min-width="164" show-overflow-tooltip>
                            <template slot="header" slot-scope="props">
                                <div class="tab_seach_box">
                                    <el-input
                                        placeholder="请输入内容"
                                        v-model="materialName"
                                        @change="searchbut"
                                        clearable>
                                    </el-input>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>

					<el-table-column label="当前库存总量" prop="currrentCount" align="center" min-width="110" show-overflow-tooltip>
                        <el-table-column label="当前库存总量" prop="currrentCount" align="center" min-width="110" show-overflow-tooltip>
                            <template slot="header" slot-scope="props">
                                <div class="tab_seach_box">
                                    <!-- <el-input
                                        placeholder="请输入内容"
                                        v-model="input"
                                        @change="searchbut"
                                        clearable>
                                    </el-input> -->
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>

					<el-table-column label="上次盘点库存总量" prop="lastInventoryCount" align="center" min-width="146" show-overflow-tooltip>
                        <el-table-column label="上次盘点库存总量" prop="lastInventoryCount" align="center" min-width="146" show-overflow-tooltip>
                            <template slot="header" slot-scope="props">
                                <div class="tab_seach_box">
                                    <!-- <el-input
                                        placeholder="请输入内容"
                                        v-model="input"
                                        @change="searchbut"
                                        clearable>
                                    </el-input> -->
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="单位" prop="unit" align="center" show-overflow-tooltip>
                        <el-table-column label="单位" prop="unit" align="center" show-overflow-tooltip>
                            <template slot="header" slot-scope="props">
                                <div class="tab_seach_box">
                                    <!-- <el-input
                                        placeholder="请输入内容"
                                        v-model="input"
                                        @change="searchbut"
                                        clearable>
                                    </el-input> -->
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="上次盘点时间" prop="lastInventoryTime" align="center" width="332" show-overflow-tooltip>
                        <el-table-column label="上次盘点时间" prop="lastInventoryTime" align="center" width="332" show-overflow-tooltip>
                            <template slot="header" slot-scope="props">
                                <div class="tab_seach_box">
                                    <el-date-picker
                                        v-model="timerange"
                                        @change="searchbut"
                                        type="datetimerange"
                                        range-separator="至"
                                        format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>
				</el-table>
			</div>
			<div class="pagination_box" ref="paginations">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageindex" :page-sizes="[20, 100, 200, 300, 400]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totals"> </el-pagination>
			</div>
			<div style="height: 0; width: 0; overflow: hidden"><input id="publicValue" type="text" /></div>
		</div>
		<script src="../js/public.js?1234"></script>
		<script>
			var layer = layui.layer;
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						showApp: false,
						pageindex: 1,
						pagesize: 20,
						totals: 0,
                        materialName: '',
                        timerange: [],
                        isopen: false,
                        tableData: [],
                        selected: [],
                        searchForms: {}
					};
				},
				methods: {
                    checkAllcount (row) {
                        console.log(row)
                    },
                    addpdd () {
                        var that = this
                        var projectId = ''
                        layer.open({
                            type: 2,
                            title: '添加盘点单',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['63.38%', '89.81%'],
                            content: 'clpdAdd.html?projectId=' + projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.pageindex = 1;
						        that.getAlltabDataList()
                            }
                        });
                    },
                    addlyd () {
                        var that = this
                        var projectId = ''
                        layer.open({
                            type: 2,
                            title: '添加领用单',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['63.38%', '89.81%'],
                            content: 'cllyAdd.html?projectId=' + projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.pageindex = 1;
						        that.getAlltabDataList()
                            }
                        });
                    },
                    addjhpd () {
                        var that = this
                        var projectId = ''
                        layer.open({
                            type: 2,
                            title: '添加计划盘点',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['63.38%', '89.81%'],
                            content: 'jhpdAdd.html?projectId=' + projectId + '&' + new Date().getTime(),
                            end: function() {
                                that.pageindex = 1;
						        that.getAlltabDataList()
                            }
                        });
                    },
                    checkpdjl () {
                        // 查看盘点记录
                        // var projectId = ''
                        // if (this.selected.length == 0) {
                        //     this.$message({
                        //         message: '请选择一条数据',
                        //         type: 'warning',
                        //         duration: 1000
                        //     });
                        //     return false
                        // }
                    },
                    checkrcjl () {
                        // 查看入场记录
                    },
                    openChildren () {
                        for (var i = 0; i < this.tableData.length; i++) {
                            if (this.isopen) {
                                this.$refs.multipleTable.toggleRowExpansion(this.tableData[i], false)
                            } else {
                                this.$refs.multipleTable.toggleRowExpansion(this.tableData[i], true)
                            }
                        }
                        this.isopen = !this.isopen
                    },
                    searchbut () {
                        this.pageindex = 1;
                        this.getAlltabDataList()
                    },
					// 每页显示条数切换
					handleSizeChange(val) {
						this.pagesize = val;
						this.pageindex = 1;
						this.getAlltabDataList()
					},
					// 页数切换
					handleCurrentChange(val) {
						this.pageindex = val;
						this.getAlltabDataList()
					},
                    // 斑马线
					tableRowClassName(value) {
						var classname = '';
						if  (value.row.typeid % 2 > 0) {
						    classname = 'success-row';
						} else if (value.row.typeid % 2 === 0) {
							classname = 'warning-row';
                        }
						return classname;
                    },
                    selectall () {
                        this.$refs.multipleTable.clearSelection();
                    },
                    select(selection, row) {
                        if (selection.length > 1) {
                            var del_row = selection.shift()
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (del_row.typeid == this.tableData[i].typeid) {
							        this.$refs.multipleTable.toggleRowSelection(this.tableData[i], false);
                                }
                            }
                        }
                    },
                    // 点击某一行选择
					rowclick(row, column, event) {
						this.$refs.multipleTable.clearSelection();
						if (row) {
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (row.typeid == this.tableData[i].typeid) {
							        this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
                                }
                            }
						}
                    },
                    selectionchange (val) {
                        this.selected = val;
                        if (val.length > 0) {
                            this.selectid = val[0].typeid
                        } else {
                            this.selectid = ''
                        }
                    },
                    getAlltabDataList () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetMaterialStorageStatistics',
                            data: {
                                page: that.pageindex,
                                pageSize: that.pagesize,
                                materialName: that.materialName,
                                startTime: that.timerange && that.timerange.length > 0 ? that.timerange[0] : '',
                                endTime: that.timerange && that.timerange.length > 0 ? that.timerange[1] : '',
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                for (var i = 0; i < res.data.length; i++) {
                                    res.data[i].typeid = i + 1
                                }
                                that.tableData = res.data
                                that.totals = res.total
                            }
                        });
                    },
				},
				mounted() {
					this.showApp = true;
					var that = this;
					setTimeout(function () {
						var aa = that.$refs.butbox.offsetHeight + that.$refs.paginations.offsetHeight;
						var ss = 'calc(100% - ' + aa + 'px)';
						that.$refs.tablebox.style.height = ss;
					}, 2);
					// getQuerys()
                    this.getAlltabDataList()
				}
			});
		</script>
	</body>
	<style>
		.page-container {
			width: 100%;
			height: 100%;
			padding: 16px;
		}
		/* 按钮 */
        .top_but_box1 {
            display: flex;
			padding: 16px 0;
            justify-content: space-between;
        }
		.top_but_box {
			display: flex;
		}
		.top_but_box .el-button {
			padding: 0;
			margin: 0;
			height: 32px;
			background: transparent;
			border: 1px solid #5574d7;
			border-radius: 5px;
			margin-right: 20px;
		}
		.top_but_box .but_cont {
			display: flex;
			padding: 0 16px;
			color: #5574d7;
			align-items: center;
		}
		.top_but_box .but_cont .but_txt {
			margin-left: 10px;
		}

		.top_but_box .el-button:focus,
		.top_but_box .el-button:hover {
			color: rgba(85, 116, 215, 1);
			border-color: rgba(85, 116, 215, 0.1);
			background-color: #ecf5ff;
		}
		.top_but_box .el-button:focus .but_cont,
		.top_but_box .el-button:hover .but_cont {
			color: rgba(85, 116, 215, 0.8);
		}
		.top_but_box .el-button:active {
			color: rgba(85, 116, 215, 0.8);
			border-color: rgba(85, 116, 215, 0.8);
			outline: none;
		}
		.top_but_box .el-button:active .but_cont {
			color: rgba(85, 116, 215, 0.8);
		}
		/* 分页 */
		.pagination_box {
			padding: 2.7vh 0 3.7vh;
		}
		.el-pagination {
			display: flex;
			justify-content: center;
		}
		.pagination_box .el-pagination button {
			border: 1px solid #d6d6d6;
			border-radius: 5px !important;
			background-color: transparent !important;
		}
		.pagination_box .el-pager li {
			border-radius: 5px !important;
			border: 1px solid #d6d6d6 !important;
			background: transparent !important;
		}
		.el-pagination.is-background .el-pager li:not(.disabled):hover {
			color: #5574d7;
		}
		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background: #5574d7 !important;
			border: none !important;
			color: #fff;
		}
        /* 表格 */
        .el-table th.gutter{
            display: table-cell!important;
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #f8f8f8;
        }
        .el-table th{
            background: linear-gradient(0deg, #F5F7FA, #ECEFF6, #F5F7FA)!important;
        }
        .table_th {
            box-shadow: 0px 1px 1px 0px rgba(234, 235, 240, 0.75), 0px 1px 1px 0px #F7F8FA;
        }

        .table_th:last-child th{
            background:#F8F8F8!important;
        }
        .el-table td, .el-table th{
            color: #333333;
            padding: 0;
            height: 32px;
        }
        .el-tooltip__popper.is-dark {
            background: #FFFFFF;
            color: #333333;
            box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
        }
        .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
            border-top-color: #FFFFFF;
        }
        .el-tooltip__popper[x-placement^=top] .popper__arrow {
            border-top-color: #FFFFFF;
        }
        .el-table--border:after,.el-table--group:after,.el-table:before {
            background-color: #E2E2E2;
        }
        .el-table--border,.el-table--group {
            border-color: #E2E2E2;
        }
        .el-table td,.el-table th.is-leaf {
            border-bottom: 1px solid #E2E2E2;
        }

        .el-table--border th,.el-table--border th.gutter:last-of-type {
            border-bottom: 1px solid #E2E2E2;
        }
        .el-table--border td,.el-table--border th {
            border-right: 1px solid #E2E2E2;
        }
        .success-row td{
            /* background: #ffffff!important; */
            background: #EEF1FB!important;
        }
        .warning-row td{
            /* background: #F8F8F8!important; */
            background: #EEF1FB!important;
        }
        .selected-row td{
            background: rgba(85, 116, 215, 0.1)!important;
        }
        .tab_seach_box .el-input__inner {
            height: 22px;
        }
        .el-table__expanded-cell[class*=cell] {
            padding: 0;
        }
        .child_table .el-table {
            /* border-top: none; */
            border-left: none;
        }
        .table_th2 th{
            background: #F8F8F8!important;
        }
        .child_table .el-table::before {
            height: 0;
        }
        .table_th2 th:first-child {
            border-right: none;
        }
        .table_th2 th:nth-child(3) {
            border-right: none;
        }
        .child_table tr td:first-child {
            border-right: none;
        }
        .child_table tr td:nth-child(3) {
            border-right: none;
        }
        .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
            width: 100%;
        }
        .table_box .el-input__icon {
            line-height: 22px;
        }
        .el-date-editor .el-range__icon {
            line-height: 14px;
        }
        .el-date-editor .el-range-separator {
            line-height: 14px;
        }
        .el-date-editor .el-range__close-icon {
            line-height: 14px;
        }
        .el-date-editor .el-range-separator {
            width: auto;
        }
        
	</style>
</html>
